<template>
	<view>
		<view>
			<view class="titbox"></view>
			<view class="programbox">
				<view class="itemlist" v-for="(item,index) in list" :key="index" :class="index!=listIndex?'hide':''">
					<view v-if="item.type==2">
						<view class="catename">
							<view class="logobox">
								<image src="../../static/person1.png"></image>
							</view>
							<view class="topic">
								{{item.name}}
							</view>
						</view>
						<view class="sbox" v-for="(sitem,sindex) in item.subject" :key="sindex">
							<view class="questionbox">
								<view class="indicate"></view>
								<view class="infobox">{{sitem.name}}</view>
							</view>
							<view class="qbox" v-for="(q,qindex) in sitem.option" :key="qindex"
								@click="hangleinfo(q,qindex,index,sindex)">
								<view class="goubox">
									<image v-if="q.is_checked==1" src="../../static/yuan.png"></image>
									<image v-else src="../../static/guo.png"></image>
								</view>
								<view class="optionsinfo">{{q.option_name}}</view>
							</view>
						</view>
					</view>
					<view v-if="item.type==1">
						<view class="catename">
							<view class="logobox">
								<image src="../../static/person1.png"></image>
							</view>
							<view class="topic">
								{{item.name}}
							</view>
						</view>
						<view class="sbox" v-for="(sitem,sindex) in item.subject" :key="sindex">
							<view class="questionbox">
								<view class="indicate"></view>
								<view class="infobox">{{sitem.name}}</view>
							</view>
							<view class="addbox">
								<view class="expressionbox" v-if="sitem.option.length==3">
									<view class="expressitem" v-for="(q,qindex) in sitem.option" :key="qindex"
										@click="hangleinfo(q,qindex,index,sindex)">
										<view class="imgbox" v-if="qindex==0">
											<image v-if="q.is_checked==1" src="../../static/good1.png"></image>
											<image v-else src="../../static/good.png"></image>
										</view>
										<view class="imgbox" v-if="qindex==1">
											<image v-if="q.is_checked==1" src="../../static/soso1.png"></image>
											<image v-else src="../../static/soso.png"></image>
										</view>
										<view class="imgbox" v-if="qindex==2">
											<image v-if="q.is_checked==1" src="../../static/nogood1.png"></image>
											<image v-else src="../../static/nogood.png"></image>
										</view>
										<view :style="{'color':q.is_checked!==1?'#222222':''}">{{q.option_name}}</view>
									</view>
								</view>
								<view class="expressionbox" v-if="sitem.option.length==4">
									<view class="expressitem" style="width: 50%;" v-for="(q,qindex) in sitem.option"
										:key="qindex" @click="hangleinfo(q,qindex,index,sindex)">
										<view class="imgbox" style="margin-left: 50rpx;" v-if="qindex==0">
											<image v-if="q.is_checked==1" src="../../static/good1.png"></image>
											<image v-else src="../../static/good.png"></image>
										</view>
										<view class="imgbox" style="margin-left: 50rpx;" v-if="qindex==1">
											<image v-if="q.is_checked==1" src="../../static/soso1.png"></image>
											<image v-else src="../../static/soso.png"></image>
										</view>
										<view class="imgbox" style="margin-left: 50rpx;" v-if="qindex==2">
											<image v-if="q.is_checked==1" src="../../static/nogood1.png"></image>
											<image v-else src="../../static/nogood.png"></image>
										</view>
										<view class="imgbox" style="margin-left: 50rpx;" v-if="qindex==3">
											<image v-if="q.is_checked==1" src="../../static/nogood1.png"></image>
											<image v-else src="../../static/nogood.png"></image>
										</view>
										<view :style="{'color':q.is_checked!==1?'#222222':''}">{{q.option_name}}</view>
									</view>
								</view>
								<view class="modellist" v-if="sitem.newlist!==[]">
									<!--  v-show="sitem.allindex==false?mindex<=1:true" -->
									<view v-for="(m,mindex) in sitem.newlist" :key="mindex" class="modelall">
										<view class="modelitem">
											<view class="modelname">
												<image src="../../static/guo.png"></image>
												<view>{{m.option_name}}</view>
												<view class="descbox" v-if="m.option_name=='其他'&&m.desc">（“{{m.desc}}”）</view>
											</view>
											<view class="allbox" v-if="sitem.newlist.length>2&&mindex==0"
												@click="openmodel(index,sindex)">
												<view>{{sitem.allindex==false?'全部':'收起'}}</view>
												<image src="../../static/sanjiao.png"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 30rpx;"></view>
				<view class="bottombox">
					<image src="../../static/bottom2.png"></image>
				</view>
				<view class="jiange"></view>
			</view>
		</view>
		<!-- <view style="height: 200rpx;"></view> -->
		<!-- 背景图 -->
		<view class="bgbox"></view>
		<view style="height: 400rpx;"></view>
		<view class="bottombut">
			<view class="butimg" v-if="listIndex==0">
				<view class="butbox" @click="nexttip(2)">
					下一题
				</view>
			</view>
			<view class="navbut" v-if="0<listIndex<list.length&&listIndex!==0">
				<view class="lastbox" @click="nexttip(1)">上一题</view>
				<view class="nextbox" @click="nexttip(2)">下一题 {{listIndex+1}}/{{list.length}}</view>
			</view>
			<view class="butimg" v-if="(listIndex+1)==list.length">
				<view class="butbox" @click="nexttip(2)">
					下一步
				</view>
			</view>
		</view>
		<view class="box_12" v-if="magstatus">
			<view class="rolebg">
				<view class="titlebox">
					<image @click="handleindex()" class="closen" src="../../static/XX.png"></image>
					<view>{{topic.name}}</view>
				</view>
				<view class="selecttopic">
					<image v-if="modelinfo.option_name=='一般'" src="../../static/soso.png"></image>
					<image v-if="modelinfo.option_name=='不满意'" src="../../static/nogood.png"></image>
					<image v-if="modelinfo.option_name=='不规范'" src="../../static/nogood.png"></image>
					<image v-if="modelinfo.option_name=='不了解'" src="../../static/noknow.png"></image>
					{{modelinfo.option_name}}的原因
				</view>
				<view class="optionsbox">
					<view class="multiple">可多选<text style="color: #93c7fb;">（可下滑查看更多）</text></view>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"  @scroll="scroll" v-if="modelinfo" :show-scrollbar='true'>
						<view class="modeloption" v-for="(item,index) in modelinfo.options" :key="item.id" >
							<view class="modelitem" @click="modeloption(index)">
								<image v-if="item.is_checked==1" src="../../static/yuan.png"></image>
								<image v-else src="../../static/guo.png"></image>
								<view>{{item.option_name}}</view>
							</view>
							<view class="textareabox" v-if="item.is_desc!==0">
								<textarea placeholder="请填写原因" maxlength="20" style="width: 550rpx;"
									@input="modelinfo.options[index].is_checked = 2" v-model="item.desc"></textarea>
							</view>
							<!-- is_desc==0没有输入框 -->
						</view>
						<!-- <view class="more" v-if="openindex!==modelinfo.options.length-1" @click="more()">查看更多</view> -->
					</scroll-view>
				</view>
				<view class="modelbut" @click="modelsure()">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// list:[{title:123,option:['11','23','123']},{title:123,option:['11','23','123']}],
				list: [],
				listIndex: 0,
				option: [], //判断是否选择
				options: [],
				magstatus: false,
				modelinfo: {}, //弹框中的内容
				topic: {}, //弹窗题目
				newlist: [],
				qindex: null,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				openindex:3,
			}
		},
		onLoad() {
			uni.showLoading({
				title:'请稍等，正在加载中……'
			})
			this.getlist()
		},
		methods: {
			//获取题目
			getlist() {
				this.$http({
					url: 'api/Answer/answer_list',
					data: {
						// token:'oU_Rv6fd_0l57FT9g5WnvyNOmjKo',
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					this.list = res.data
					uni.hideLoading()
				})
			},
			//下一题1上一题，2是下一题
			nexttip(n) {
				console.log(this.list[this.listIndex].subject, 'listIndex')
				
				//判断是否选择
				for (let i = 0; i < this.list[this.listIndex].subject.length; i++) {
					for (let j = 0; j < this.list[this.listIndex].subject[i].option.length; j++) {
						this.options.push(this.list[this.listIndex].subject[i].option[j])
					}
				}
				for (let k = 0; k < this.options.length; k++) {
					if (this.options[k].is_checked == 2) {
						this.option.push(this.options[k].is_checked)
					}
				}
				console.log(this.option, 'option', this.options)

				if (n == 1) {
					this.listIndex--
					this.option = []
					this.options = []
				} else {
					if (this.option.length !== this.list[this.listIndex].subject.length) {
						uni.showToast({
							title: '当前页面还有未选择的题目，请先答题',
							icon: 'none'
						})
						this.option = []
						this.options = []
						return
					} else {
						if ((this.listIndex + 1) == this.list.length) {
							uni.setStorageSync('answer', this.list)
							this.option = []
							this.options = []
							setTimeout(() => {
								// uni.navigateTo({
								// 	url:'/pages/railway/railway'
								// })
								uni.redirectTo({
									url: '/pages/submit/submit'
								})
							}, 1000)
						} else {
							this.listIndex++
							this.option = []
							this.options = []
						}

					}
				}
			},
			//选择
			hangleinfo(q, qindex, index, sindex) {
				this.openindex = 3
				this.scrollTop=0
				this.old.scrollTop =0
				if (this.list[index].subject[sindex].option[qindex].is_checked == 1) {
					for (let i = 0; i < this.list[index].subject[sindex].option.length; i++) {
						this.list[index].subject[sindex].option[i].is_checked = 1
					}
					this.list[index].subject[sindex].option[qindex].is_checked = 2
				}
				if (this.list[index].subject[sindex].option[qindex].options.length !== 0) {
					this.magstatus = true
					this.topic = this.list[index].subject[sindex]
					this.newlist = []
					this.modelinfo = {}
					this.list[index].subject[sindex].newlist = this.newlist
					this.list[index].subject[sindex].allindex = false
					this.modelinfo = this.list[index].subject[sindex].option[qindex]
					this.modelinfo.options.forEach(item => {
						item.is_checked = 1
						item.desc = null
					})
					this.qindex = qindex
				}else{
					this.list[index].subject[sindex].newlist=[]
				}
				console.log(this.modelinfo, 'list', this.topic)
				// if (this.list[index].option[qindex].checked==1) {
				// 	for (let i = 0; i < this.list[index].option.length; i++) {
				// 		this.list[index].option[i].checked = 1
				// 	} //改变选项时置空，重选
				// 	this.list[index].option[qindex].checked = 2
				// }

			},
			openmodel(index, sindex) {
				this.magstatus = true
				this.topic = this.list[index].subject[sindex]
				this.newlist = []
				this.modelinfo = {}
				this.list[index].subject[sindex].newlist = this.newlist
				
				this.list[index].subject[sindex].allindex = false
				this.modelinfo = this.list[index].subject[sindex].option[this.qindex]
				
			},
			//弹窗多选
			modeloption(index) {
				if (this.modelinfo.options[index].is_checked == 1) {
					this.modelinfo.options[index].is_checked = 2
					// if(this.modelinfo.options[index].option_name=="其他"&&this.modelinfo.options[index].is_checked == 2){
					// 	if(!this.modelinfo.options[index].desc){
					// 		uni.showToast({
					// 			title:'请输入原因',
					// 			icon:'none'
					// 		})
					// 		return
					// 	}
					// }
				} else {
					this.modelinfo.options[index].is_checked = 1
				}
			},
			//弹窗确定
			modelsure() {
				this.modelinfo.options.forEach(item => {
					if (item.is_checked == 2) {
						this.newlist.push(item)
					}
				})
				const c = this.newlist.some(item =>
					item.is_desc==1&&!item.desc
				)
				console.log(c,'c')
				// return
				if(c==true){
					uni.showToast({
						title:'请输入原因',
						icon:'none'
					})
					this.newlist = []
					return
				}
				
				const b = this.modelinfo.options.some(item =>item.is_checked == 2)
				console.log(12,b)
				if(b==false){
					uni.showToast({
							title:'请选择原因',
							icon:'none'
						})
						return
				}
				this.magstatus = false
				console.log(this.topic, 'this.topic.option', this.list, this.newlist)
			},
			//提交
			submit() {
				this.nexttip(2)
				uni.setStorageSync('answer', this.list)
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/submit/submit'
					})
					// uni.navigateTo({
					// 	url:'/pages/railway/railway'
					// })
				}, 1500)

			},
			//是否展开全部
			whetherall(index, sindex) {
				let item = this.list[index].subject[sindex]
				this.$set(item, 'allindex', !item.allindex)
				this.list = [...[], ...this.list]
				console.log(this.list[index].subject[sindex])
			},
			scroll: function(e) {
					// console.log(e)
					this.old.scrollTop = e.detail.scrollTop
				},
			more(){
				this.openindex=this.modelinfo.options.length-1
				setTimeout(()=>{
					this.scrollTop=999999
					this.old.scrollTop =999999
				},300)
			},
			handleindex(){
				this.magstatus = false
				this.modelinfo.options.forEach(item => {
					if (item.is_checked == 1) {
						this.modelinfo.is_checked=1
					}
				})
				console.log(this.modelinfo.options,'this.modelinfo.options',this.modelinfo)
			}
		}
	}
</script>

<style>
	page {
		/* background-color: #3283C5; */
		background: linear-gradient(-89deg, #008fd6, #3ba3ed);
	}
</style>
<style lang="scss" scoped>
	.bgbox {
		width: 100%;
		background: url(http://wjdc.zxkjnc.com/images/hllhp1.png) no-repeat;
		height: 795rpx;
		background-size: 100% 797rpx;
	}

	.bottombut {
		width: 100%;
		height: 150rpx;
		position: fixed;
		bottom: 0;
		background: linear-gradient(-89deg, #008fd6, #3ba3ed);
		z-index: 99;
	}

	.butimg {
		left: 50%;
		transform: translate(-50%, 0);
		position: absolute;
		width: 669rpx;
		height: 120rpx;
		margin: 30rpx 0 0rpx 0;
		padding-bottom: 30rpx;
		z-index: 199;

		.butbox {
			left: 50%;
			transform: translate(-50%, 0);
			position: absolute;
			width: 669rpx;
			height: 89rpx;
			text-align: center;
			line-height: 89rpx;
			// margin: 90rpx 0 30rpx 0;
			background: url(http://wjdc.zxkjnc.com/images/but.png) no-repeat;
			background-size: 669rpx 89rpx;
			font-size: 38rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.navbut {
		left: 50%;
		transform: translate(-50%, 0);
		position: absolute;
		width: 669rpx;
		height: 89rpx;
		text-align: center;
		line-height: 89rpx;
		margin: 30rpx auto 0rpx auto;
		display: flex;
		justify-content: space-between;
		color: #FFFFFF;
		padding-bottom: 30rpx;

		.lastbox {
			width: 268rpx;
			height: 89rpx;
			background: url(http://wjdc.zxkjnc.com/images/but7.png) no-repeat;
			background-size: 268rpx 89rpx;
		}

		.nextbox {
			width: 357rpx;
			height: 89rpx;
			background: url(http://wjdc.zxkjnc.com/images/but8.png) no-repeat;
			background-size: 357rpx 89rpx;
		}
	}

	.bottombox {
		left: 50%;
		transform: translate(-50%, 0);
		position: absolute;
		// width: 669rpx;
		// height: 89rpx;
		// text-align: center;
		// line-height: 89rpx;
		// margin: 90rpx 0 30rpx 0;
		width: 720rpx;
		height: 39rpx;
		margin-top: 20rpx;
		// margin-bottom: 130rpx;
		z-index: 99;

		image {
			width: 720rpx;
			height: 39rpx;
		}
	}

	.jiange {
		width: 100%;
		height: 260rpx;
		position: absolute;
	}

	.titbox {
		// width: 98%;
		top: 30rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 740rpx;
		height: 22rpx;
		background: linear-gradient(92deg, #6EA7FB, #7CBDF7);
		border-radius: 10rpx;
		position: absolute;
	}

	.programbox {
		width: 720rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 49rpx 0rpx rgba(59, 137, 204, 0.68);
		min-height: 200rpx;
		left: 50%;
		top: 52rpx;
		transform: translate(-50%, 0);
		position: absolute;
		z-index: 9;
		padding-bottom: 30rpx;
		margin-bottom: 230rpx;

		.itemlist {
			width: 100%;
			overflow-y: hidden;

			.catename {
				display: flex;
				align-items: center;
				font-size: 35rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #1067B5;
				margin: 20rpx 0 20rpx 0;

				.logobox {
					width: 18%;
					text-align: center;

					image {
						width: 85rpx;
						height: 85rpx;
						border-radius: 100%;
					}
				}

				.topic {
					width: 80%;
				}
			}

			.sbox {
				.questionbox {
					display: flex;
					width: 96%;
					margin: 0 auto 20rpx auto;

					.indicate {
						width: 0;
						height: 0;
						border-top: 12rpx solid transparent;
						border-bottom: 12rpx solid transparent;
						border-right: 12rpx solid #CAE4FF;
						margin-top: 30rpx;
					}

					.infobox {
						width: 92%;
						background: linear-gradient(90deg, #CAE4FF, #FFFFFF);
						border-radius: 10rpx;
						padding: 20rpx;
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #222222;
					}
				}

				.addbox {
					.expressionbox {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						margin: 10rpx auto 20rpx auto;
						width: 90%;

						.expressitem {
							width: 33.3%;
							display: flex;
							align-items: center;
							// justify-content: center;
							font-size: 32rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: rgba(34, 34, 34, 0.4);

							.imgbox {
								margin-right: 14rpx;
								margin-top: 10rpx;

								image {
									width: 79rpx;
									height: 64rpx;
								}
							}
						}
					}

					.modellist {
						width: 90%;
						margin: 0 auto 30rpx auto;
						background: #F3F9FF;
						border-radius: 10rpx;

						.actmodelall {
							-webkit-line-clamp: 2;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;

							.modelitem {
								height: 80rpx;
								display: flex;
								align-items: center;
								font-size: 28rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								color: #222222;
								justify-content: space-between;

								.modelname {
									display: flex;
									align-items: center;
									
									image {
										width: 30rpx;
										height: 30rpx;
										margin: 0 21rpx 0 17rpx;
									}
								}

								.allbox {
									margin-right: 17rpx;
									display: flex;
									align-items: center;
									font-size: 28rpx;
									font-family: Source Han Sans CN;
									font-weight: 500;
									color: #444444;

									image {
										width: 15rpx;
										height: 13rpx;
									}
								}
							}
						}

						.modelall {
							.modelitem {
								height: 80rpx;
								display: flex;
								align-items: center;
								font-size: 28rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								color: #222222;
								justify-content: space-between;

								.modelname {
									display: flex;
									align-items: center;
									.descbox{
										width: 450rpx;
										-webkit-line-clamp: 1;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										overflow: hidden;
										text-overflow: ellipsis;
										// height: 80rpx;
									}

									image {
										width: 30rpx;
										height: 30rpx;
										margin: 0 21rpx 0 17rpx;
									}
								}

								.allbox {
									margin-right: 17rpx;
									display: flex;
									align-items: center;
									font-size: 28rpx;
									font-family: Source Han Sans CN;
									font-weight: 500;
									color: #444444;

									image {
										width: 15rpx;
										height: 13rpx;
									}
								}
							}
						}
					}
				}

				.qbox {
					width: 92%;
					border: 1rpx solid #C3E0FF;
					padding: 20rpx 0rpx;
					border-radius: 10rpx;
					margin: 0rpx auto 20rpx auto;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					display: flex;
					align-items: center;

					.goubox {
						width: 10%;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.optionsinfo {
						width: 90%;
					}
				}
			}
		}

		// .cards{
		// 	width: 600rpx;
		// 	margin-left: 30rpx;
		// 	transition: all 1s;
		// 	/* padding: 10rpx 20rpx 0rpx 20rpx; */
		// 	.question{
		// 		font-size: 30rpx;
		// 		font-weight: bold;
		// 		margin-top: 50rpx;
		// 		white-space: normal;
		// 		margin-bottom: 70rpx;
		// 		word-break: break-all;
		// 	}
		// }
	}

	.xuanA {
		width: 580rpx;
		/* height: 35rpx; */
		color: #555555;
		border-radius: 50rpxs;
		font-size: 30rpx;
		text-align: start;
		line-height: 40rpx;
		white-space: normal;
		margin-bottom: 20rpx;
		word-break: break-all;
		padding: 30rpx 10rpx 30rpx 10rpx;
	}

	.xuanA.active {
		background-color: #4CD964;
	}

	.hide {
		display: none;
		opacity: 0;
		margin-top: -100px;
		position: absolute;
		pointer-events: none;
		width: calc(100% - 40rpx);
	}

	.box_12 {
		display: flex;
		width: 750rpx;
		height: 100%;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
		// bottom:0;
		z-index: 99;

		.rolebg {
			width: 680rpx;
			margin: 0 auto;
			min-height: 650rpx;
			border-radius: 20rpx;
			background-color: #FFF;
			position: relative;
			padding-bottom: 50rpx;
			background-size: 680rpx 100%;
			

			.titlebox {
				width: 100%;
				background-image: url(http://wjdc.zxkjnc.com/storage/default/aa.png);
				min-height: 160rpx;
				background-size: 100% 260rpx;
				font-size: 34rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				.closen{
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					z-index: 999;
					right: 10rpx;
					top: 8rpx;
				}

				>view {
					width: 620rpx;
					padding: 30rpx 30rpx 0 30rpx;
				}
			}

			.selecttopic {
				font-size: 34rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;

				image {
					width: 79rpx;
					height: 64rpx;
					margin-right: 14rpx;
				}
			}

			.optionsbox {
				width: 620rpx;
				margin: 19rpx auto 0 auto;

				.multiple {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #3E84CB;
				}
				.scroll-Y {
						height: 460rpx;
						.modeloption {
							// display:flex;
							// align-items: center;
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #222222;
							width: 580rpx;
							padding: 20rpx 0;
							// height: 72rpx;
							border: 1rpx solid #C3E0FF;
							border-radius: 10rpx;
							margin-top: 20rpx;
						
							.modelitem {
								display: flex;
								align-items: center;
						
								image {
									width: 30rpx;
									height: 30rpx;
									margin: 0 21rpx 0 17rpx;
								}
							}
						
							.textareabox {
								width: 530rpx;
								height: 100rpx;
								background: #F3F9FF;
								border-radius: 6rpx;
								margin: 20rpx auto 0 auto;
								padding: 10rpx 20rpx;
						
								>textarea {
									height: 100rpx;
									// width: 90%;
								}
							}
						}
						.more{
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #3E84CB;
							text-align: right;
							margin-top: 10rpx;
							margin-right: 10rpx;
						}
					}

				
			}

			.modelbut {
				background-image: url(http://wjdc.zxkjnc.com/storage/default/bb.png);
				width: 569rpx;
				height: 89rpx;
				background-size: 569rpx 89rpx;
				text-align: center;
				line-height: 89rpx;
				font-size: 38rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				margin: 60rpx auto 0 auto;
			}
		}
	}
	/deep/ ::-webkit-scrollbar {
			/*滚动条整体样式*/
			width: 8px !important;
			height: 1px !important;
			overflow: auto !important;
			background: #ccc !important;
			-webkit-appearance: auto !important;
			display: block;
		}
	 
		/deep/ ::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			border-radius: 10px !important;
			box-shadow: inset 0 0 5px  rgba(122, 169, 255, 1) !important;
			background: #7b7979 !important;
		}
	 
		/deep/ ::-webkit-scrollbar-track {
			/*滚动条里面轨道*/
			// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
			// border-radius: 10px !important;
			background: #FFFFFF !important;
			}

	
</style>
